@import '@/assets/css/public';
.GJ220IntervalGraph{
	color:#fff;
	.wrapper{
	  .ctn{
			border: 1px solid #e3e5e4;
			box-sizing: border-box;
			height: 960px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			& > div + div{
				margin-left: 10px;
			}
			.one{
				flex:1.5;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				border: 1px solid #e3e5e4;
				box-sizing: border-box;
				& > div + div{
					border-top: 1px solid #e3e5e4;
				}
				.oneTop{
					flex:1;
					overflow: hidden;
				}
				.oneBtm{
					flex:1.1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: center;
					& > p{
						font-size: 16px;
						margin: 10px 20px;
					}
					.tableWrapper{
						flex:1;
						width: 80%;
						overflow: hidden;
						margin-bottom: 10px;
						display: flex;
						flex-direction: column;
						& > p{
							font-size: 14px;
							text-align: center;
							border: 1px solid #e3e5e4;
							border-bottom: 0;
							padding: 5px 0;
						}
						.tableBox{
							flex:1;
							overflow: hidden;
							// 表格样式
							.el-table td.gutter, .el-table th.gutter{
								background:#20437a;
							}
							/deep/ .el-table{
								background: transparent;
								display: flex;
								flex-direction: column;
								flex:1;
								&::before{
									display: none;
								}
								.el-table__row{
									background:transparent;
								}
								.el-table__row:nth-child(1) td{
									color:#fbff1e;
								}
								.el-table__row:nth-child(2) td{
									color:#79dd97;
								}
								.el-table__row:nth-child(3) td{
									color:#fd3430;
								}
								.el-table__row:nth-child(4) td{
									color:#fbff1e;
								}
								.el-table__row:nth-child(5) td{
									color:#79dd97;
								}
								.el-table__row:nth-child(6) td{
									color:#fd3430;
								}
								tbody tr:hover>td {
									// background:rgba(51,152,230, .5) !important;
									// border-bottom: 1px solid #467cd0;
									background:transparent;
								}
								tr{
									background: transparent;
									// color:#b1c1dc;
									&:nth-child(even){
										// background-color: #0f1f47;
									}
								}
								&::before{
									// background: #303e5c;
								}
								&::after{
									// background: #303e5c;
								}
								
								th {
									// border-bottom: 1px solid #303e5c;
									color: #fff;
									padding: 2px 0;
								}
								tbody td{
									// border-bottom: 1px solid #303e5c;
									color: #fff;
									padding: 0;
								}
								th>.cell{
									font-size: 12px;
								}
								.el-table__body-wrapper{
									flex:1;
									overflow: auto;
								}
								.el-table__header-wrapper{
									.el-table__header{
										width: 100% !important;
									}
								}
								.el-table__empty-block{
									width: 100% !important;
								}
								.el-table__body-wrapper{
									.el-table__body{
										width: 100% !important;
									}
								}
								th.el-table__cell{
									background: transparent;
								}
								// 设置表格边框颜色
								.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
									// border:1px solid #303e5c;
								}
								.el-table--border, .el-table--group{
									// border:1px solid #303e5c;
								}
							}
						}
					}
				}
			}
			.two{
				flex:2;
				overflow: hidden;
				border: 1px solid #e3e5e4;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				.two_one{
					flex:3;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						padding: 5px 0;
						text-align: center;
						font-size: 16px;
					}
					.two_oneCtn{
						flex:1;
						overflow: hidden;
						border-top: 1px solid #e3e5e4;
						border-bottom: 1px solid #e3e5e4;
						display: flex;
						justify-content: center;
						padding-top: 15px;
						& > div + div{
							margin-left: 10px;
						}
						.two_oneCtnLeft{
							margin-top: 20px;
							display: flex;
							flex-direction: column;
							align-items: center;
							& > p{
								margin-bottom: 10px;
							}
							.inner{
								width: 150px;
								height: 80px;
								border: 2px solid #ff7260;
								display: flex;
								align-items: center;
								.innerLeft{
									border: 1px solid #ff7260;
									flex:1.6;
									overflow: hidden;
									height: 35px;
									margin-left: 10px;
									position: relative;
									& > span{
										display: block;
										font-size: 28px;
										color: #ff7260;
										transform: rotate(45deg);
										position: absolute;
										top:2px;
										left: 8px;
									}
								}
								.innerRight{
									height: 100%;
									flex:2;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									& > p{
										font-size: 12px;
										text-align: right;
										margin: 5px 5px 0 0;
									}
									.AB{
										flex:1;
										overflow: hidden;
										display: flex;
										justify-content: flex-end;
										align-items: flex-end;
										margin: 0 5px 5px 0;
										.A{
											display: flex;
											flex-direction: column;
											align-items: center;
											margin-right: 5px;
											& > p{
												font-size: 12px;
												margin-bottom: 5px;
											}
											.imgBox{
												width: 30px;
												height: 30px;
												& > img{
													width: 100%;
													height: 100%;
												}
											}
										}
										.B{
											display: flex;
											flex-direction: column;
											align-items: center;
											& > p{
												font-size: 12px;
												margin-bottom: 5px;
											}
											.imgBox{
												width: 30px;
												height: 30px;
												& > img{
													width: 100%;
													height: 100%;
												}
											}
										}
									}
								}
							}
						}
						
					}
				}
				.two_two{
					flex:4;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						padding: 5px 0;
						text-align: center;
						font-size: 16px;
					}
					.two_twoCtn{
						flex:1;
						overflow: hidden;
						border-top: 1px solid #e3e5e4;
						border-bottom: 1px solid #e3e5e4;
						padding: 20px;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						.two_twoCtnTop{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.YuanFangicon{
								width: 116px;
								position: relative;
								.yuanfang{
									height: 80px;
									position: relative;
									& > p:nth-child(1){
										position: absolute;
										top:0;
										left:50%;
										transform: translateX(-50%);
									}
									& > p:nth-child(2){
										position: absolute;
										top:55%;
										right:0;
										transform: translateY(-50%);
									}
								}
								.polygon-icon{
									width: 45px;
									height: 45px;
									position: absolute;
									top:52%;
									left:50%;
									transform: translate(-50%, -50%);
									cursor: pointer;
								}
							}
							& > p{
								margin-top: 10px;
							}
						}
						.two_twoCtnBtm{
							margin-top: 20px;
							flex:1;
							overflow: hidden;
							display: flex;
							.item{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								.YuanFangicon{
									width: 116px;
									position: relative;
									.yuanfang{
										height: 80px;
										position: relative;
										& > p:nth-child(1){
											position: absolute;
											top:0;
											left:50%;
											transform: translateX(-50%);
										}
										& > p:nth-child(2){
											position: absolute;
											top:55%;
											right:0;
											transform: translateY(-50%);
										}
									}
									.polygon-icon{
										width: 45px;
										height: 45px;
										position: absolute;
										top:52%;
										left:50%;
										transform: translate(-50%, -50%);
										cursor: pointer;
									}
								}
								// & > span{
								// 	display: block;
								// 	width: 58px;
								// 	height: 58px;
								// 	& > img{
								// 		width: 100%;
								// 		height: 100%;
								// 	}
								// }
								& > p{
									margin-top: 10px;
								}
							}
						}
					}
				}
				.two_three{
					flex:3;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						padding: 5px 0;
						text-align: center;
						font-size: 16px;
					}
					.two_threeCtn{
						padding: 30px 0;
						flex:1;
						overflow: hidden;
						width: 100%;
						border: 1px solid #e3e5e4;
						border-left: 0;
						border-right: 0;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						& > div{
							padding-right: 10px;
							border: 1px solid #e3e5e4;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: center;
							.icon{
								width: 50px;
								height: 40px;
								& > div{
									transform: scale(.7) !important;
									margin-top: -5px;
								}
							}
						}
					}
				}
				.two_four{
					flex:2;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						padding: 5px 0;
						text-align: center;
						font-size: 16px;
					}
					.two_fourCtn{
						padding: 20px 0;
						flex:1;
						overflow: hidden;
						width: 100%;
						border-top: 1px solid #e3e5e4;
						display: flex;
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							padding: 10px;
							box-sizing: border-box;
							& > li{
								width: 50%;
								display: flex;
								align-items: center;
								border: 1px solid #e3e5e4;
								padding: 3px 0;
								box-sizing: border-box;
								.svgBox{
									width: 60px;
									height: 25px;
									margin-left: 5px;
									display: flex;
									align-items: center;
									justify-content: center;
									& > svg{
										width: 100%;
										height: 100%;
									}
								}
								& > p{
									flex:1;
									overflow: hidden;
								}
							}
						}
					}
				}
			}
			.three{
				flex:2;
				overflow: hidden;
				border: 1px solid #e3e5e4;
				box-sizing: border-box;
				display: flex;
				.three_left{
					flex:1;
					overflow: hidden;
					border-right: 1px solid #e3e5e4;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					.three_left_one{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							padding: 5px 0;
							text-align: center;
							font-size: 16px;
						}
						.three_left_oneCtn{
							padding: 20px 0;
							flex:1;
							overflow: hidden;
							width: 100%;
							border: 1px solid #e3e5e4;
							border-left: 0;
							border-right: 0;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							padding: 10px;
							& > div{
								width: 100%;
								padding-right: 10px;
								border: 1px solid #e3e5e4;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								// justify-content: center;
								.icon{
									width: 50px;
									height: 40px;
									& > div{
										transform: scale(.7) !important;
										margin-top: -5px;
									}
								}
							}
						}
					}
					.three_left_two{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							padding: 5px 0;
							text-align: center;
							font-size: 16px;
						}
						.three_left_twoCtn{
							padding: 20px 0;
							flex:1;
							overflow: hidden;
							width: 100%;
							border: 1px solid #e3e5e4;
							border-left: 0;
							border-right: 0;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							padding: 10px;
							& > div{
								width: 100%;
								padding-right: 10px;
								border: 1px solid #e3e5e4;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								// justify-content: center;
								.icon{
									width: 50px;
									height: 40px;
									& > div{
										transform: scale(.7) !important;
										margin-top: -5px;
									}
								}
							}
						}
					}
					.three_left_three{
						flex:3;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							padding: 5px 0;
							text-align: center;
							font-size: 16px;
						}
						.three_left_threeCtn{
							padding: 20px 0;
							flex:1;
							overflow: hidden;
							width: 100%;
							border-top: 1px solid #e3e5e4;
							display: flex;
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								// align-items: center;
								padding: 10px;
								box-sizing: border-box;
								& > li{
									width: 100%;
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									padding: 3px 0;
									box-sizing: border-box;
									.svgBox{
										width: 60px;
										height: 25px;
										margin-left: 5px;
										display: flex;
										align-items: center;
										justify-content: center;
										& > svg{
											width: 100%;
											height: 100%;
										}
									}
									& > p{
										flex:1;
										overflow: hidden;
									}
								}
							}
						}
					}
				}
				.three_right{
					flex:1;
					overflow: hidden;
					border-right: 1px solid #e3e5e4;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					.three_left_one{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							padding: 5px 0;
							text-align: center;
							font-size: 16px;
						}
						.three_left_oneCtn{
							padding: 20px 0;
							flex:1;
							overflow: hidden;
							width: 100%;
							border: 1px solid #e3e5e4;
							border-left: 0;
							border-right: 0;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							padding: 10px;
							& > div{
								width: 100%;
								padding-right: 10px;
								border: 1px solid #e3e5e4;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								// justify-content: center;
								.icon{
									width: 50px;
									height: 40px;
									& > div{
										transform: scale(.7) !important;
										margin-top: -5px;
									}
								}
							}
						}
					}
					.three_left_two{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							padding: 5px 0;
							text-align: center;
							font-size: 16px;
						}
						.three_left_twoCtn{
							padding: 20px 0;
							flex:1;
							overflow: hidden;
							width: 100%;
							border: 1px solid #e3e5e4;
							border-left: 0;
							border-right: 0;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							padding: 10px;
							& > div{
								width: 100%;
								padding-right: 10px;
								border: 1px solid #e3e5e4;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								// justify-content: center;
								.icon{
									width: 50px;
									height: 40px;
									& > div{
										transform: scale(.7) !important;
										margin-top: -5px;
									}
								}
							}
						}
					}
					.three_left_three{
						flex:3;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							padding: 5px 0;
							text-align: center;
							font-size: 16px;
						}
						.three_left_threeCtn{
							padding: 20px 0;
							flex:1;
							overflow: hidden;
							width: 100%;
							border-top: 1px solid #e3e5e4;
							display: flex;
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
								padding: 10px;
								box-sizing: border-box;
								& > li{
									width: 100%;
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									padding: 3px 0;
									box-sizing: border-box;
									.svgBox{
										width: 60px;
										height: 25px;
										margin-left: 5px;
										display: flex;
										align-items: center;
										justify-content: center;
										& > svg{
											width: 100%;
											height: 100%;
										}
									}
									& > p{
										flex:1;
										overflow: hidden;
									}
								}
							}
						}
					}
				}
			}
	  }
	}
}
